<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>支付订单</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <style>
        body {
            margin: 10px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
    </style>
</head>
<body>
<script th:src="@{/layui/layui.all.js}"></script>
<script>
    //一般直接写在一个js文件中

</script>

<div class="layui-form-item">
    <h1></h1>
    <h2 th:text="${orderId}"></h2>
</div>

<div class="layui-form-item">
    <div class="layui-input-block">
        <a th:href="@{/finishPay(orderId=${orderId})}">付款</a>
    </div>

</div>
<script>
    const h = document.getElementsByTagName("h1")[0];
    let time = 30;
    function doTimeCountDown() {

        time--;
        const seconds = time ;
        if (time <= 0) {
            return "订单已过期";
        }
        return seconds+"秒后订单过期";
    }

    function startCountDown() {
        setInterval(function () {
            h.innerHTML = doTimeCountDown();
        }, 1000);
    }

    window.onload = startCountDown;
</script>

</body>
</html>

